<template>
  <div class="car-owner-detail">
    <div class="basic-info-container">
      <div style="padding: 16px 16px 16px 0">
        <el-page-header @back="goBack" :content="headerTitle"></el-page-header>
      </div>
      <!-- 基本信息概览 -->
      <div class="info-overview">
        <div class="info-header" style="padding-right: 20px">
          <h3>基础信息</h3>
        </div>
        <div class="info-content">
          <div>
            <div class="info-row">
              <span class="info-label">审核类型：</span>
              <span class="info-value">{{ detail.type_text }}车主</span>
            </div>
          </div>
          <div>
            <div class="info-row">
              <span class="info-label">申请时间：</span>
              <span class="info-value">{{ detail.created_at }}</span>
            </div>
          </div>
          <div>
            <div class="info-row">
              <span class="info-value">申请人：</span>
              <img class="avatar" :src="detail.avatar" />
              <span class="info-value">{{ detail.real_name }}</span>
              <span class="info-value">{{ detail.phone }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="info-section-warps">
        <!-- 实名认证信息 -->
        <div class="info-section">
          <div class="section-header">
            <h4>实名认证</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img :src="detail.id_card_front_full" />
                  <span>身份证人像</span>
                </div>
                <div class="id-about">
                  <img :src="detail.id_card_back_full" />
                  <span>身份证国微</span>
                </div>
              </div>
              <div class="item-content">
                <p>姓名：{{ detail.real_name }}</p>
                <p>身份证号：{{ detail.id_card_number }}</p>
                <p>证件有效期：{{ detail.id_card_validity }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 驾驶证信息 -->
        <div class="info-section">
          <div class="section-header">
            <h4>驾驶证</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img :src="detail.driver_license_full" />
                  <span>驾驶证</span>
                </div>
              </div>

              <div class="item-content">
                <p>证件有效期：{{ detail.driver_license_validity }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 行驶证信息 -->
      <div class="info-section-warps">
        <!-- 行驶证 -->
        <div
          class="info-section"
          v-for="(item, index) in detail.car_owner_cars"
          :key="index"
        >
          <div class="section-header">
            <h4>行驶证{{ index + 1 }}</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img :src="item.drivering_license_full" />
                  <span>行驶证</span>
                </div>
              </div>
              <div class="item-content">
                <p>车牌号：{{ item.car_number }}</p>
                <p>品牌型号：{{ item.brand_model }}</p>
                <p>车座数：{{ item.seats }}</p>
                <p>证件有效期：{{ item.drivering_license_validity }}</p>
              </div>
            </div>
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img :src="item.operating_license_full" />
                  <span>营运证</span>
                </div>
              </div>
              <div class="item-content">
                <p>证件有效期：{{ item.operating_license_validity }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核操作 -->
      <div class="aside-info-section">
        <div class="section-content">
          <div style="flex: 0.7; display: flex; align-items: anchor-center">
            <div>
              <span style="margin-right: 20px">审核操作</span>
              <el-radio-group
                v-model="auditForm.account_inspection_status"
                :disabled="disabled"
              >
                <el-radio :label="'success'">通过</el-radio>
                <el-radio :label="'fail'">驳回</el-radio>
              </el-radio-group>
            </div>

            <div style="width: 500px; margin-left: 20px">
              <el-input
                v-model="auditForm.account_inspection_msg"
                placeholder="请输入驳回原因"
                :disabled="disabled"
              ></el-input>
            </div>
            <el-button
              v-if="!disabled"
              type="primary"
              style="margin-left: 20px"
              @click="submitAudit"
              :disabled="disabled"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail, updateItem } from "./api/carOwner";

export default {
  data() {
    return {
      headerTitle: "返回上一级页面",
      id: null,
      detail: null,
      auditStatus: 1,
      rejectReason: "",
      auditForm: {
        account_inspection_status: "",
        account_inspection_msg: "",
      },
      disabled: false,
    };
  },
  methods: {
    onLoad() {},
    goBack() {
      this.$router.go(-1); //  go()后退+刷新 back()后退
    },
    fetchDetail() {
      this.loading = true;
      getDetail(this.id)
        .then((res) => {
          this.detail = res.data || res;
          console.log(1, this.detail);

          this.auditForm.account_inspection_status =
            this.detail.status === 0
              ? ""
              : this.detail.status === 1
              ? "success"
              : "fail";
          this.auditForm.account_inspection_msg = this.detail.reason;
          this.disabled = this.detail.status != 0 ? true : false;
        })
        .catch((error) => {
          this.$message.error("获取数据失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitAudit() {
      // 判断必填项
      if (!this.auditForm.account_inspection_status) {
        this.$message.error("请选择审核状态");
        return;
      }
      if (
        this.auditForm.account_inspection_status === "fail" &&
        !this.auditForm.account_inspection_msg
      ) {
        this.$message.error("请输入驳回原因");
        return;
      }
      // 审核状态：1=审核通过，2=审核拒绝 必填
      if (this.auditForm.account_inspection_status === "success") {
        this.auditForm.status = 1;
      } else {
        this.auditForm.status = 2;
      }
      let params = {
        status: this.auditForm.status,
        reason: this.auditForm.account_inspection_msg,
      };
      console.log(params);
      updateItem(params, this.id).then((res) => {
        console.log(res);
        this.$message.success("审核成功");
        this.goBack();
      });

      // "status": 1, //审核状态：1=审核通过，2=审核拒绝 必填
      // "reason": "" //拒绝原因 审核拒绝时必填
    },
  },
  created() {
    // 先从路由参数获取基本数据
    this.id = this.$route.query.id;
    // 调用接口获取完整详情
    this.fetchDetail();
  },
};
</script>

<style scoped lang="scss">
.car-owner-detail {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
}
.basic-info-container {
  padding: 20px;
  .info-overview {
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    display: flex;
    align-items: center;

    .info-header {
      h3 {
        margin: 0 0 15px 0;
        font-size: 16px;
        color: #303133;
      }
    }

    .info-content {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info-row {
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .info-label {
          color: #909399;
          margin-right: 5px;
        }

        .info-value {
          color: #606266;
          margin-right: 20px;
        }

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
    }
  }

  .info-section-warps {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10%;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 25px;
    .info-section {
      padding-bottom: 15px;
      .section-header {
        h4 {
          margin: 0 0 15px 0;
          font-size: 15px;
          color: #303133;
        }
      }
      .section-content {
        .id-about {
          width: 200px;
          height: 128px;
          position: relative;
          &:first-child {
            margin-bottom: 12px;
          }
          img {
            width: 100%;
            height: 100%;
            border: 0.5px solid #eee;
          }
          span {
            border-width: 0px;
            position: absolute;
            right: 0;
            top: 0;
            width: 76px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            font-size: 12px;
            text-align: center;
            color: rgb(255, 255, 255);
            background-color: #909399;
          }
        }
        .info-item {
          display: flex;
          margin-bottom: 15px;

          .item-label {
            width: 80px;
            color: #909399;
            font-size: 14px;
          }
          .item-content {
            flex: 1;
            p {
              margin: 0 0 20px 0;
              color: #606266;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .aside-info-section {
    h3 {
      margin: 0 0 15px 0;
      font-size: 16px;
      color: #303133;
    }
    display: flex;
    align-items: center;
    .section-header {
      width: 180px;
      h4 {
        font-size: 15px;
        color: #303133;
      }
    }
    .section-content {
      flex: 1;
      p {
        color: #606266;
        font-size: 14px;
      }
    }
  }
}

.auth-action {
  .info-header {
    padding-right: 20px;
  }
  .info-row {
    padding-right: 20px;
    display: flex;
    align-items: center;
  }
}
.aside-info-section {
  .section-header {
    width: 180px;
    h4 {
      font-size: 15px;
      color: #303133;
    }
  }
  .section-content {
    .id-about {
      width: 200px;
      height: 128px;
      position: relative;
      &:first-child {
        margin-bottom: 12px;
      }
      img {
        width: 100%;
        height: 100%;
      }
      span {
        border-width: 0px;
        position: absolute;
        right: 0;
        top: 0;
        width: 76px;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        font-size: 12px;
        text-align: center;
        color: rgb(255, 255, 255);
        background-color: #909399;
      }
    }
    .info-item {
      display: flex;
      margin-bottom: 15px;

      .item-label {
        width: 80px;
        color: #909399;
        font-size: 14px;
      }
      .item-content {
        flex: 1;
        p {
          margin: 0 0 20px 0;
          color: #606266;
          font-size: 14px;
        }
      }
    }
  }
  .section-content {
    display: flex;
    justify-content: space-between;
    // p {
    //   color: #606266;
    //   font-size: 14px;
    // }
  }
}
</style>
